<template>
  <div class="bg">
    <el-form :inline="true" ref="form" :model="form" label-width="90px">
        <el-row :gutter="24">
          <el-col :span="6" v-for="(item,index) in LSoptions" :key="index" >
            <searchItem :item="options" :form="form"></searchItem>
          </el-col>
            <el-col :span="6" class="btnBox" style="text-align:right">
              <el-button style="width:80px" type="" @click="resetData">重 置</el-button>
              <el-button style="width:80px" type="primary" @click="search">筛 选</el-button>
            </el-col>
        </el-row>
    </el-form>
    <div class="searchG" v-if="options.length>3">
      <div @click="upDown">
        高级筛选 <i class="el-icon-arrow-down" v-if="isDown"></i> <i class="el-icon-arrow-up" v-else></i>
      </div>
    </div>
  </div>
</template>
<script>
import searchItem from "../compoent/searchItem.vue";
export default {
  components: {
    searchItem
  },
  props: {
    
  },
  data () {
    return {
      form:{},
      options:
        [
          type:input,
          label:ERP订单号,
          porp:'数据字段0',
,
        
          type:daterange,
          label:订单时间,
          porp:'数据字段1',
,
        
          type:input,
          label:生产订单号,
          porp:'数据字段2',
,
        
          type:select,
          label:产出品名称,
          porp:'数据字段3',
            options:[{lable:'请手动配置下拉选项'}]
          ,
        
          type:select,
          label:生产版本,
          porp:'数据字段4',
            options:[{lable:'请手动配置下拉选项'}]
          ,
        
          type:select,
          label:班组班次,
          porp:'数据字段5',
            options:[{lable:'请手动配置下拉选项'}]
          ,
        
          type:select,
          label:加工线,
          porp:'数据字段6',
            options:[{lable:'请手动配置下拉选项'}]
          ,
        
          type:select,
          label:工作中心,
          porp:'数据字段7',
            options:[{lable:'请手动配置下拉选项'}]
          ,
        ]
      ,
      LSoptions:[],
      isDown:true
    }
  },
  mounted () {
    // 默认收起
    if(this.options.length>3){
      this.LSoptions=[this.options[0],this.options[1],this.options[2]]
    }else{
      this.LSoptions=this.options
    }
  },
  methods: {
    search(){
     this.$emit('searchData',this.form)
    },
    resetData(e){
      this.form={}
      this.$emit('resetData',this.form)
    },
    upDown(){
      if(!this.isDown){
        this.LSoptions=[this.options[0],this.options[1],this.options[2]]
      }else{
        this.LSoptions=this.options
      }
      this.$nextTick(()=>{
        this.isDown=!this.isDown
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .bg{
    background: #FFF;
    // border-radius: 4px;
    padding: 20px 0px 0 0px;
    width: 100%;
    margin-bottom: 24px;
    /deep/ .el-col{
      // padding-left: 0 !important;
      // padding-right: 0 !important;
    }
    /deep/ .el-row{
      // transition: height 0.3s ease-in-out;
      margin-left: 0 !important;
      margin-right: 0 !important;
      display: flex;
      flex-wrap: wrap;
      .btnBox{
        float: right;
        flex: 1;
      }
    }
    .searchG{
      text-align: center;
      padding-bottom: 16px;
      font-size: 14px;
      color: #1890ff;
      >div{
        display: inline-block;
        cursor: pointer;
      }
    }
  }
</style>